<template>
	<view class="root">
		<movable-area :scale-area="true" :style="{ height: `63vh` }" class="width-100percent">
			<movable-view
				:scale="true"
				direction="all"
				class="width-100percent height-100percent"
				:style="{ backgroundImage: `url(${photo.src})`, backgroundSize: `cover` }"
			/>
		</movable-area>

		<view class="ml-50 mr-50 mt-50 fd-row ai-center jc-sb">
			<image
				:style="{ width: `160rpx` }"
				class="height-50"
				src="/static/bg-fixedBase.png"
				mode="aspectFit"
			/>
			<image class="width-30 height-30" src="/static/icon-overlap.png" mode="aspectFit" />
		</view>

		<scroll-view class="tags" :scroll-x="true">
			<view class="tags-options">
				<label
					v-for="(tag, index) in wigGoods"
					:key="index"
					:class="[{ active: tagIndex === index }, 'tags-option']"
					@click="switchTag(index)"
				>
					{{ tag.title }}
				</label>
			</view>
		</scroll-view>

		<scroll-view class="wigs" :scroll-x="true">
			<view class="wigs-options">
				<view
					v-for="(item, index) in wigGoods[tagIndex].goods"
					:key="index"
					class="ai-center"
				>
					<image
						:class="[{ active: wigIndex === index }, 'wigs-option']"
						:src="item.thumb"
						@click="switchWig(index)"
						mode="aspectFit"
					/>
					<text class="color-333 fs-28 mt-10">{{ item.title }}</text>
				</view>
			</view>
		</scroll-view>

		<view :style="{ padding: `6rpx 75rpx`, margin: `30rpx` }" class="fd-row jc-sa">
			<navigator
				hover-class="tap-hover"
				class="fs-28 color-fff bgc-ff8a00 br-30 lh-2"
				:style="{ padding: `0 18rpx` }"
				:url="`/pages/common/Webview?url=${encodeURIComponent(
					'https://jiafa.chengshikuxi.site/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.index'
				)}`"
			>
				查看订单
			</navigator>
			<button
				hover-class="tap-hover"
				class="fs-28 color-fff bgc-ff8a00 br-30 lh-2"
				:style="{ padding: `0 18rpx`, margin: 0 }"
				@click="toBuy"
			>
				立即购买
			</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Storage, transformURL } from "@/libs/utils";

	@Component
	export default class TryOn extends Vue {
		// component property
		tagIndex: number = 0;
		wigIndex: number = 0;
		wigGoods: AnyObject = [];

		photo: AnyObject = {
			src: "",
			backgroundPhotoWidth: 0,
			width: 0,
			top: 0,
			left: 0,
		};
		wig: AnyObject = {
			width: 0,
			height: 0,
			top: 0,
			left: 0,
			border: "none",
		};
		is_get_info: number = 0;

		async onLoad() {
			uni.showToast({ title: "Loading...", icon: "loading" });
			const { data } = await this.$request.get("&r=util.uploader.getimgandgoods");

			this.photo.src = data.image;
			this.wigGoods = data.goods;
			this.is_get_info = +data.is_get_info;
		}
		switchTag(index: number) {
			this.tagIndex = index;
		}
		switchWig(index: number) {
			this.wigIndex = index;
		}

		async toBuy() {
			if (!this.is_get_info) {
				const [getFail, getRes] = await (<AnyObject>uni).getUserProfile({
					desc: "后台记录用户订单信息",
				});
				if (getFail) return;
				await this.$request.post("&r=wxapp.hair_auth", getRes.userInfo);
			}

			const { wigGoods, tagIndex, wigIndex } = this,
				url = transformURL("https://jiafa.chengshikuxi.site/app/index.php", {
					i: 1,
					c: "entry",
					m: "ewei_shopv2",
					do: "mobile",
					r: "goods.detail",
					id: wigGoods[tagIndex].goods[wigIndex].id,
					openid: Storage.get("authorization"),
				});

			uni.navigateTo({ url: `/pages/common/Webview?url=${url}` });
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	// scss
	.tags {
		margin: 36rpx 22rpx 0;
		.tags-options {
			flex-direction: row;
			.tags-option {
				flex-shrink: 0;
				margin-right: 30rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: 333;
				&.active {
					background-color: #ffc159;
					padding: 4rpx 22rpx;
				}
			}

			&::before,
			&::after {
				content: "";
				flex-shrink: 0;
				width: 1rpx;
			}
		}
	}
	.wigs {
		margin: 22rpx;
		.wigs-options {
			flex-direction: row;
			height: 170rpx;
			.wigs-option {
				box-sizing: border-box;
				flex-shrink: 0;
				margin-right: 18rpx;
				width: 130rpx;
				height: 100%;
				border-radius: 12rpx;
				background-color: #eee;
				&.active {
					border: 1rpx solid #333;
				}
			}

			&::before,
			&::after {
				content: "";
				flex-shrink: 0;
				width: 1rpx;
			}
		}
	}
</style>